<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>小商城</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />

    <style>
        .layui-tab-brief>.layui-tab-title .layui-this{
            color: #3f7dff;
        }
        .layui-tab-brief>.layui-tab-title .layui-this:after{
            border-bottom: 3px solid #3f7dff;
        }
        .layui-nav-tree .layui-nav-child dd.layui-this,
        .layui-nav-tree .layui-nav-child dd.layui-this a,
        .layui-nav-tree .layui-this,
        .layui-nav-tree .layui-this>a,
        .layui-nav-tree .layui-this>a:hover {
            background-color: #1e9fff;
            color: #fff;
        }
    </style>
</head>
<body class="layui-layout-admin">

<div class="layui-header layui-bg-blue">

    <div class="layui-logo layui-hide-xs  layui-bg-black" >
        桃饱网热卖
    </div>

    <ul class="layui-nav layui-layout-left">
        <li class="layui-nav-item">
            <div class="layui-form" style="color: black">
                <select name="search" id="search" class="" lay-search>
                </select>
            </div>
        </li>


        <li class="layui-nav-item">
            <a class="layui-btn" id="searchBtn" lay-submit="" lay-filter="searchBtn">
                <i class="layui-icon layui-icon-search"></i>
            </a>
        </li>
    </ul>
    <!--<a class="layui-btn" id="submitBtn" lay-submit="" lay-filter="submitBtn">
                <i class="layui-icon layui-icon-search"></i>
            </a>-->



    <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item">
            <a href="#">
                <a href="#">
                    购物车
                </a>
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="#">
                <a href="#">
                    我的足迹
                </a>
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="#">
                <a href="#">
                    收藏夹
                </a>
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="#">
                <a href="#">
                    商品分类
                </a>
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="#">
                <a href="#">
                    我的订单
                </a>
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="#">
                帮助中心
                <dl class="layui-nav-child">
                    <dd><a href="#">问题反馈</a></dd>
                    <dd><a href="#">疑问解答</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
            </a>
        </li>
        <li class="layui-nav-item">
            <a href="#">
                <img th:src="@{/img/header.jpg}" class="layui-nav-img" />
                <i th:text="${m.userName}"></i>
                <input th:value="${m.id}" type="hidden" id="mid">
                <dl class="layui-nav-child">
                    <dd>
                        <a href="#">基本信息</a>
                    </dd>
                    <dd><a href="#" id="editPassword">密码修改</a></dd>
                    <dd><a href="#" onclick="loginOut()">安全退出</a></dd>
                </dl>
            </a>
        </li>
    </ul>
</div>

<div class="layui-side layui-bg-black layui-hide-xs">
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree">
            <li class="layui-nav-item">
                <a href="javascript:;">随便逛逛</a>
                <dl class="layui-nav-child">
                    <dd><a class="left_menu" menu_id="1" menu_url="" href="javascript:;">推荐</a></dd>
                    <dd><a class="left_menu" menu_id="2" menu_url="" href="javascript:;">新品</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">浏览分类</a>
                <dl class="layui-nav-child">
                    <dd><a class="left_menu" menu_id="3" menu_url="" href="javascript:;">热销商品</a></dd>
                    <dd><a class="left_menu" menu_id="4" menu_url="" href="javascript:;">新品</a></dd>
                    <dd><a class="left_menu" menu_id="5" menu_url="" href="javascript:;">优惠</a></dd>
                    <dd><a class="left_menu" menu_id="6" menu_url="" href="javascript:;">即将上架</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">商品类型</a>
                <dl class="layui-nav-child">
                    <dd><a class="left_menu" menu_id="7" menu_url="" href="javascript:;">衣服</a></dd>
                    <dd><a class="left_menu" menu_id="8" menu_url="" href="javascript:;">裤子</a></dd>
                    <dd><a class="left_menu" menu_id="9" menu_url="" href="javascript:;">潮鞋</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>

<!--首页-->
<div class="layui-body">
    <div lay-filter="head_tabs" class="layui-tab layui-tab-brief" lay-allowClose="true">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="0">桃饱首页</li>
        </ul>
        <div class="layui-tab-content"
             style="background-color: #ccc;padding: 10px 20px;">
            <div class="layui-tab-item layui-show" id="main" name="main">

            </div>
        </div>
    </div>
</div>

<script id="password" type="text/html">
    <div class="layui-bg-gray">
        <form class="layui-form"  style="margin: 20px;" >
            <input type="hidden" value="1" name="id"><!--TODO 指定用户id-->
            <!---->
            <div class="layui-form-item">
                <label class="layui-form-label">旧密码:</label>
                <div class="layui-input-block">
                    <input type="password" class="layui-input" name="oldPwd">
                </div>
            </div>
            <!---->
            <div class="layui-form-item">
                <label class="layui-form-label">新密码:</label>
                <div class="layui-input-block">
                    <input type="password" class="layui-input" name="newPwd">
                </div>
            </div>
            <!---->
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码:</label>
                <div class="layui-input-block">
                    <input type="password" class="layui-input" name="confirmPwd"
                           lay-verify="required|confirmPwd">
                </div>
            </div>
            <!---->
            <div class="layui-form-item">
                <label class="layui-form-label">预留手机号:</label>
                <div class="layui-input-block">
                    <a class="layui-form-label">187****1937</a> <!--TODO 手机号码-->
                    <label class="layi"></label>
                </div>
            </div>
            <!---->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">短信验证码:</label>
                    <div class="layui-input-block"style="width: 100px;">
                        <input type="text" class=" layui-input" maxlength="6">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-normal" id="getMobileCode" onclick="getMobileCode()">获取手机验证码</a>
                    </div>
                </div>
                <div class="layui-inline" style="display: none;">
                    <div class="layui-input-inline">
                        <a class="layui-btn" id="submitPwd" lay-filter="submitPwd" lay-submit="">提交</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</script>

<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
<script>
    var $,form,layer;
    layui.use(['jquery','element','layer','form'],function(){
        $= layui.jquery;
        form = layui.form;
        layer = layui.layer;
        var ele = layui.element;

        findSearchOption();
        findMain('/page/userIndex/UserMain');


        setHeight(0);
        removeFirstI();

        //搜索框点击事件
        form.on('submit(searchBtn)',function (obj) {
            var categoryId = $('#search').val();
            var memberId = $('#mid').val();
            findMain('/page/userIndex/UserMain/'+categoryId+'/'+memberId);
        })

        form.verify({
            confirmPwd:function (value) {
                //alert(value+"----"+$('input[name="newPwd"]').val());
                if ($('input[name="newPwd"]').val()!=value){

                    return "两次密码输入不一致";
                }
            }
        })
        //监听头部菜单
        $('#editPassword').on('click',function () {
            layer.open({
                type:1,
                content: $('#password').html(),
                area:'600px',
                anim:1,
                title: '密码修改',
                btn:["确定","取消"],
                btnAlign:'c',
                fixed:true,
                resize:false,
                move:false,
                btn1:function (i,o) {
                    $('#submitPwd').click();
                }
            });
        })

        //修改密码 form表单提交
        form.on('submit(submitPwd)',function (data) {
            var formData = data.field;
            console.log(formData);
            $.ajax({
                type:'post',
                url:'/system/mc/editPwd',
                date:formData,
                dataType: 'json',
                success:function (result) {
                    layer.msg(result.msg);
                    if (result.is()) {
                        layer.closeAll();
                    }
                }
            })
        })

        //监听左侧菜单点击
        $('.left_menu').on('click',function(){
            var a = $(this);
            var menu_title = a.text();
            var menu_url = a.attr("menu_url");
            var menu_id = a.attr("menu_id");

            //定义数组
            var ids = [];
            $('.layui-tab-title li').each(function(){
                var layId = $(this).attr('lay-id');
                ids.push(layId);
            });
            let index = $.inArray(menu_id,ids);
            if(index<0){
                ele.tabAdd('head_tabs',{
                    title:menu_title,
                    id:menu_id,
                    content:'<iframe id="iframe'+menu_id+'" src="'+menu_url+'" scrolling="auto" style="width: 100%;height: 780px;border: 0px solid #fff;border-radius: 5px;" ></iframe>'
                })
                setHeight(menu_id);
            }
            removeFirstI();
            ele.tabChange('head_tabs',menu_id);//定位到打开的tab

        })

        //监听tab点击事件
        ele.on('tab(head_tabs)',function(){
            var layId = $(this).attr('lay-id');
            //去掉左侧菜单选中样式
            $('.layui-nav-tree').find('.layui-this').removeClass('layui-this');
            //给对应到的菜单加上样式
            $('.layui-nav-tree').find('a[menu_id="'+layId+'"]').parent().addClass('layui-this');
        })
        //监听i的点击事件
        $('.layui-tab-title li i').toggle('click',function(){
            removeFirstI();
        })

    })
    //退出登录
    function loginOut() {
        layer.confirm('是否确定退出?',function (index){
            if(index>0){
                $.ajax({
                    type:'get',
                    url:'/login/lc/loginOut',
                    dataType:'json',
                    success:function (result) {
                        if (result.is){
                            window.location.href = '/page/login';
                        }
                    }
                })
            }
        })
    }

    //获取页面高度
    function setHeight(id){
        var height = window.outerHeight-238;
        $('#iframe'+id).css('height',height);
    }

    function removeFirstI(){
        $('.layui-tab-title li[0]').find("i").remove();
    }

    function topMethod(){
        alert();
    }

    //倒计时
    function getMobileCode() {
        var inter;
        $('#getMobileCode').addClass('layui-disabled');
        var time = 10;
        clearInterval(inter);
        sendCode();//调用发送短信
        inter = window.setInterval(function () {
            time--;
            $('#getMobileCode').html((time)+"秒后重新获取");
            if (time==0){
                clearInterval(inter);
                time = 10;
                $('#getMobileCode').removeClass('layui-disabled');
                $('#getMobileCode').html("点击重新获取");
            }
        },1000);

    }
    function sendCode() {
        var mobiles = [];
        mobiles.push("18775811937");
        $.ajax({
            type: 'post',
            url:'/send/sc/sms',
            data:{
                mobiles:mobiles,
                template:1

            },
            dataType:'json',
            success:function (result) {
                layer.msg((result.msg));
            }
        })
    }
    //拿关键词和类目名放入选择搜索框中
    function findSearchOption() {
        $.ajax({
            type:'post',
            url:'/system/category/findAll',
            data:{
                status:0
            },
            dataType:'json',
            success:function (res) {

                var obj = $('#search');

                //清除里面内容
                $(obj).empty();

                var option = '<option value="">选择搜索</option>';
                $(obj).append(option);
                $.each(res.data,function (i,data) {
                    option = '<option value="'+data.id+'"> '+data.name+'</option>';
                    $(obj).append(option);
                })

                form.render('select');//指定表单刷新
            }
        })
    }

    function findMain(src) {
        $('#main').empty();
        var iframe = '<iframe id="iframe0" src="'+src+'" scrolling="auto"\n' +
            '                style="width: 100%;height: 780px;border: 0px solid #fff;border-radius: 5px;" ></iframe>';
        $('#main').append(iframe);
        form.render('iframe');

    }

</script>
</body>
</html>
